<!-- 新闻列表 -->
<template>
  <div class="container">
    <van-loading v-if="isLoading" style="text-align: center; margin-top: 10px" type="spinner" color="#1989fa" />
    <div v-else>
      <span class="add_shop"><router-link to='/'><van-icon name="arrow-left" />返回</router-link></span>
      <van-list>
        <van-cell v-for="item in newsList" :key="item.id">
          <div class="cell_box" v-on:click="handleGoDetail(item.id)">
            <div class="cell_img">
              <img :src="item.img_url" alt="">
            </div>
            <div class="cell_info">
              <p>{{item.title}}</p>
              <div class="time_click">
                <span>发表时间：{{item.add_time}}</span>
                <span>点击：{{item.click}}</span>
              </div>
            </div>
          </div>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      newsList: [], // 新闻列表数据
      isLoading: true // 是否加载中
    }
  },
  methods: {
    // 获取新闻列表数据
    async getNewsList () {
      const { data } = await this.$http.get('/api/getnewslist')
      if (data.status !== 0) { console.log('接口请求失败') }
      this.newsList = data.message
      this.isLoading = false
    },
    // 跳转新闻详情页面
    handleGoDetail (id) {
      // this.$router.push('/newsDetail') 路由跳转
      // 路由跳转传参
      this.$router.push({
        path: '/newsDetail',
        query: {
          id: id
        }
      })
    }
  },
  beforeCreate () {},
  mounted () {
    this.getNewsList()
  }
}
</script>

<style scoped>

.add_shop a {
  position: fixed;
  top: 16px;
  left: 10px;
  color: #ffffff;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.container {
  padding-bottom: 50px;
  padding-top: 50px;
}

.van-cell:not(:last-child)::after {
  border-color: #cccccc;
  left: 16px;
  right: 16px;
}

.cell_box {
  width: 100%;
  display: flex;
}

.cell_img {
  flex: 1;
}

.cell_img img {
  width: 100%;
  height: 100%;
}

.cell_info {
  width: 85%;
  padding-left: 10px;
}

.cell_info p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0;
  margin: 0;
  font-size: 14px;
  font-weight: bold;
  color: #000;
}

.time_click {
  display: flex;
  justify-content: space-between;
  color: #226aff;
  font-size: 12px;
}

</style>
